<!-- 头部 -->
<template>
  <!-- 设置背景色为白色、高度为 64px，padding-right 为 4， border-bottom 为 slate 200 -->
  <div class="bg-white h-[64px] flex pr-4 border-b border-slate-100">
    <!-- 为了不让elementPlus 覆盖 tailwindCSS样式,在外层用div包裹起来-->
    <!-- 左边栏收缩、展开 -->
    <!-- 宽度42 高度64 cursor:鼠标样式, flex items-center justify-center : 搭配使用，水平、垂直居中,hover:bg-gray-200 : 鼠标移动上去时，背景色为 bg-gray-200 -->
    <div class="w-[42px] h-[64px] cursor-pointer flex items-center justify-center text-gray-700 hover:bg-gray-200" @click="handleMenuWidth">
      <el-icon>
        <Fold v-if="menuStore.menuWidth == '250px'"/>
        <expand v-else/>
      </el-icon>
    </div>


    <div class="ml-auto flex">
      <!-- 点击刷新页面 -->
      <el-tooltip class="box-item" effect="dark" content="刷新" placement="bottom">
        <div class="w-[42px] h-[64px] cursor-pointer flex items-center justify-center text-gray-700 hover:bg-gray-200"
             @click="handleRefresh">
          <el-icon>
            <Refresh />
          </el-icon>
        </div>
      </el-tooltip>
      <!-- 点击全屏展示 -->
      <el-tooltip class="box-item" effect="dark" content="全屏" placement="bottom">
        <div class="w-[42px] h-[64px] cursor-pointer flex items-center justify-center text-gray-700 hover:bg-gray-200" @click="toggle">
          <el-icon>
            <FullScreen v-if="!isFullscreen"/>
            <Aim v-else/>
          </el-icon>
        </div>
      </el-tooltip>

      <!-- 登录用户头像 -->
      <!-- AdminHeader 头组件中的用户头像下拉菜单位置比较靠下的问题,为 <el-dropdown> 组件添加 flex items-center justify-center 样式 -->
      <el-dropdown class="flex items-center justify-center">
        <!-- flex items-center justify-center : 水平垂直居中 text-gray-700 text-xs : 字体为最小号，字体样式为灰色-->
        <span class="el-dropdown-link flex items-center justify-center text-gray-700 text-xs">
          <!-- 头像 Avatar -->
          <el-avatar class="mr-2" :size="25" src="https://picx.zhimg.com/v2-3782a44ed1d1ee7f1ace158a86ff7002_r.jpg?source=2c26e567"/>
          Admin
          <el-icon class="el-icon--right">
            <arrow-down/>
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>修改密码</el-dropdown-item>
            <el-dropdown-item>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>


  </div>
</template>

<script setup>
import {useMenuStore} from '@/store/menu.js'
import {Expand} from "@element-plus/icons-vue";

// 引入 useFullscreen
import {useFullscreen} from '@vueuse/core'

// isFullscreen 表示当前是否处于全屏；toggle 用于动态切换全屏、非全屏
const {isFullscreen, toggle} = useFullscreen()

// 引入菜单Store
const menuStore = useMenuStore()

const handleMenuWidth = () => {
  // 动态设置菜单的宽度大小
  menuStore.handleMenuWidth()
}

// 刷新页面
const handleRefresh = () => location.reload()

</script>

<style scoped>

</style>